<template>
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;height: 30px;">
            <span class="haz-header">历史数据比对(左边为历史数据)</span>
            <div>
            <el-button size="small"  @click="diffHandler">差异分析</el-button>
            <el-button type="primary" icon="el-icon-success" size="small" plain
            v-permission="'bus:data:edit'"  @click="cancelHandler" style="margin-right: 10px;"> 返回</el-button>
          </div>
        </div>

        <div class="scroll-container" @scroll="handleScroll">
          <el-row class="block" style="height: 100%;">
            <el-col :span="12" height="100vh">
              <survey-model ref="surveyCompHistory"  :structureId="models.historyStructureId"  tableHeight="100vh"></survey-model>
            </el-col>
            <el-col :span="12" height="100vh">
              <survey-model ref="surveyComp"  :structureId="models.structureId"  tableHeight="100vh"></survey-model>
            </el-col>
          </el-row>
        </div>

        </el-card>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Ref,Watch } from 'vue-property-decorator';
import router from '@/router/index';
import OpenMap from '@/components/OpenMap.vue';
import SurveyModel from '@/components/SurveyModel.vue';
import {getFormData} from '@/api/investDataCommon';

@Component({ components: { SurveyModel,OpenMap } })
export default class compareView extends Vue {

    @Ref("surveyCompHistory") surveyCompHistory!:any;
    @Ref("surveyComp") surveyComp!:any;

    models: any = {
        historyStructureId:'',
        structureId: '',
        historyDataId:'',
        dataId: ''

    }
    diffHandler(){
      
        this.$router.push({ path: '/quality/dataDiff', query: this.models});
 
    }

    positionChangeHandler(val){
        if(val && val.length >0){
            this.models.formData.point = val.join(',');
        }
    }

    handleScroll(event: Event) {
      const target = event.target as HTMLElement;
      if (this.surveyCompHistory && this.surveyComp) {
        this.surveyCompHistory.$el.scrollTop = target.scrollTop;
        this.surveyComp.$el.scrollTop = target.scrollTop;
      }
    }

    cancelHandler(){
        this.$router.back();
    }
    @Watch('$route.query.dataId',{immediate:true})
    routerChangeHandler(val){
        if(val){
            this.models.structureId = router.currentRoute.query.structureId;
            this.models.historyStructureId = router.currentRoute.query.historyStructureId;
            this.models.dataId =  router.currentRoute.query.dataId;
            this.models.historyDataId =  router.currentRoute.query.historyDataId;
            getFormData({id: this.models.dataId}).then(res =>{
                this.surveyComp.addFormData(res.data);
            }).catch(e =>{
                console.log(e)
            })
            getFormData({id: this.models.historyDataId}).then(res =>{
                this.surveyCompHistory.addFormData(res.data);
            }).catch(e=>{
                console.log(e)
            })


        }

    }
}
</script>
<style scoped>
 .haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
 .scroll-container {
   height: 100vh;
   overflow-y: auto;
 }
</style>
